import { Component } from "react";
class Child extends Component{
  // state = {
  //   timer:null
  // }
  componentDidMount(){
     // this.timerId这个变量不需要涉及到页面的渲染，也不需要使用this.setState进行更新
      // 只需要一个临时变量，可以在多个生命周期函数之前访问即可，我们想到多个生命周期之前的this是通用的
    // 所以给this添加变量
    this.timerId = setInterval(() =>{
      console.log('子组件的定时器')
    },10000)
  }
  componentWillUnmount(){
    console.log('子组件被卸载时执行')
    clearInterval(this.timerId)
  }
  render(){
    return(
      <h3>我是子组件</h3>
    )
  }
}
// vue2的父子组件的生命周期函数的执行顺序
// 父组件3  b - c -bm   ---> 子4个 ---> 父组件的mounted
class Header extends Component{
  state = {
    count:0
  }
  updateCount = () =>{
    this.setState({
      count:this.state.count+1
    })
  }
  render(){
    return(
      <>
        <h3>父组件--{this.state.count}</h3>
        <button onClick={this.updateCount}>修改count+1</button>
        {this.state.count>3?(<div>{this.state.count}</div>): <Child />}
      </>
    )
  }
}
function App(){
  return(
    <div>
      <Header/>
    </div>
  )
}
export default App